<template>
  <div class="housejob">
    <van-nav-bar
      left-text="找家政服务"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      :border="false"
    ></van-nav-bar>

    <van-card class="jobsinfo">
      <template #tags>
        <div class="content">
          <div class="contents">
            <div class="contop">
              <van-row type="flex">
                <van-col>
                  <div class="contops"></div>
                </van-col>
                <van-col>
                  <span>找家政</span>
                </van-col>
              </van-row>
            </div>
            <van-form ref="loginForm">
              <van-cell-group>
                <van-cell class="wantjob">
                  <span>*需求岗位：</span><br />
                  <van-row type="flex">
                    <div
                      class="jobs"
                      v-for="(item, index) in jobinfo"
                      :key="index"
                      @click="post(index)"
                    >
                      <span> {{ item }}</span>
                    </div>
                  </van-row>
                </van-cell>

                <van-field
                  v-model="user.tel"
                  type="tel"
                  label="手机号码："
                  placeholder="请输入手机号码："
                  clearable
                  required
                  :rules="rules.tel"
                  maxlength="11"
                ></van-field>

                <van-row type="flex" justify="space-between">
                  <van-col span="20">
                    <van-field
                      v-model="user.age"
                      type="number"
                      label="年龄："
                      placeholder="请输入年龄："
                      clearable
                    >
                    </van-field>
                  </van-col>
                  <van-col span="4">
                    <span
                      style="font-size: 13px;
                  color: rgba(0, 0, 0, 1);
                  font-family: PingFangSC-regular;"
                      >不限</span
                    >
                  </van-col>
                </van-row>

                <van-row type="flex" justify="space-between">
                  <van-col span="20">
                    <van-field
                      v-model="user.salary"
                      type="number"
                      label="薪资："
                      placeholder="请输入薪资："
                      clearable
                    >
                    </van-field>
                  </van-col>
                  <van-col span="4">
                    <span
                      style="font-size: 13px;
                  color: rgba(0, 0, 0, 1);
                  font-family: PingFangSC-regular;
                  text-align:center"
                      >不限</span
                    >
                  </van-col>
                </van-row>

                <van-field v-model="user.home" label="住家：" clearable center>
                  <template #button>
                    <van-button
                      class="homebtn"
                      size="small"
                      type="default"
                      @click="show('住家')"
                      >住家</van-button
                    >
                    <van-button
                      class="homebtn"
                      size="small"
                      type="default"
                      @click="show('不住家')"
                      >不住家</van-button
                    >
                  </template>
                </van-field>

                <van-field
                  v-model="user.contact"
                  type="text"
                  label="联系人："
                  clearable
                  center
                ></van-field>

                <van-field
                  v-model="user.Nativeplace"
                  type="text"
                  label="籍贯要求："
                  clearable
                  center
                ></van-field>

                <van-field
                  v-model="user.workplace"
                  type="text"
                  label="工作地点："
                  clearable
                  center
                ></van-field>
              </van-cell-group>
            </van-form>
          </div>
          <van-divider />
        </div>
      </template>
    </van-card>
    <van-button class="bottombutton" type="primary" size="large" block
      >提交资料</van-button
    >
  </div>
</template>

<script>
import { getjob } from "@/api/user";
export default {
  props: {
    showkeeplog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      user: {
        tel: "",
        age: "",
        salary: "",
        home: "",
        contact: "",
        Nativeplace: "",
        workplace: ""
      },
      rules: {
        tel: [
          {
            required: true,
            messsage: "手机号不能为空"
          },
          {
            required: true,
            pattern: /^1[3|5|7|8]\d{9}$/,
            message: "手机号格式错误"
          }
        ]
      },
      jobinfo: []
    };
  },
  created() {
    this.gethousejob();
  },
  methods: {
    async gethousejob() {
      const { data } = await getjob();
      this.jobinfo = data[0].Mainbusiness;
    },
    onClickLeft() {
      this.$emit("update:showkeeplog", false);
    },
    onClickRight() {},
    post(id) {
      console.log(id);
    },
    show(msg) {
      this.user.home = msg;
      console.log(this.user.home);
    }
  }
};
</script>

<style lang="scss" scoped>
.housejob {
  position: relative;
  height: 1390px;
  width: 750px;
  background-color: rgba(248, 248, 248, 100);
  ::v-deep.van-nav-bar {
    height: 180px;
    background-color: #3f51b5;
    .van-nav-bar__content {
      padding-top: 50px;
    }
    .van-nav-bar__left {
      font-size: 33px;
      .van-icon {
        color: rgba(255, 255, 255, 100);
      }
      .van-nav-bar__text {
        color: rgba(255, 255, 255, 100);
      }
    }
  }
  .jobsinfo {
    height: 1212px;
    width: 704px;
    margin: 0 0 0 24px;
    border-radius: 8px 8px 8px 8px;
    padding: 0;
    z-index: 10;
    position: absolute;
    background-color: rgba(255, 255, 255, 100);
    bottom: 50px;

    .content {
      padding: 0;
    }
  }
  .content {
    padding: 0 42px;
    background-color: rgba(248, 248, 248, 100);

    .contents {
      background-color: rgba(255, 255, 255, 100);
      border-radius: 8px 8px 8px 8px;
      color: rgba(16, 16, 16, 100);
      text-align: center;
      font-family: Arial;

      .contop {
        height: 110px;
        line-height: 110px;
        color: rgba(16, 16, 16, 100);
        font-size: 28px;
        font-family: PingFangSC-regular;
        font-weight: bold;
        .contops {
          width: 8px;
          height: 28px;
          margin: 43px 20px 0 25px;
          background-color: rgba(63, 81, 181, 100);
        }
      }
      .wantjob {
        color: rgba(16, 16, 16, 100);
        height: 256px;
        .jobs {
          padding: 1px 15px 0 15px;
          border: 2px solid rgba(151, 145, 145, 100);
          border-radius: 28px 28px 28px 28px;
          text-align: center;
          margin-left: 13px;
          margin-top: 28px;
          &:hover {
            border: 2px solid rgba(63, 81, 181, 100);
          }
          span {
            font-size: 10px;
            &:hover {
              color: rgba(63, 81, 181, 100);
            }
          }
        }
      }
      .companysinfo {
        position: relative;
        .selectcol {
          position: absolute;
          top: 0;
          right: 0;
          select {
            width: 160px;
            font-size: 13px;
            border: 0;
            outline: none;
          }
        }
      }
    }
    .van-divider {
      margin: 0;
    }
  }
  .bottombutton {
    background-color: rgba(63, 81, 181, 100);
    font-size: 28px;
    margin-top: 100px;
    position: absolute;
    z-index: 12;
    bottom: 0;
  }
  .homebtn {
    border-radius: 28px 28px 28px 28px;
    border: 2px solid rgba(151, 145, 145, 100);
    color: rgba(151, 145, 145, 100);
    font-size: 20px;
    margin-left: 16px;
  }
}
</style>
